/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 3rem 0 2rem;
  background: none;
  color: inherit;
  text-align: center;
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .heroBanner {
  background: #23272F;
}

.heroLogo {
  width: 80px;
  height: auto;
  margin-bottom: 2rem;
}

:global(.hero__title) {
  color: var(--ifm-font-color-base);
  margin-bottom: 1.5rem;
}

:global(.hero__subtitle) {
  margin-bottom: 2rem;
}

@media screen and (max-width: 966px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.heroButton {
  border-radius: 9999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.heroButton:hover {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .heroButton:hover {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.1);
}

.heroButton:active {
  transform: scale(0.95);
}

.heroSpreadsheet {
  max-width: min(100%, 38em);
  margin: 2rem auto 0;
  border-radius: 8px;
  overflow: hidden;
}

.heroSpreadsheet :global(.Spreadsheet) {
  margin: 0;
}

.heroSpreadsheet :global(.Spreadsheet),
.heroSpreadsheet :global(.Spreadsheet) table tr:nth-child(2n),
.heroSpreadsheet :global(.Spreadsheet__active-cell--edit) {
  background: var(--ifm-background-surface-color);
  color: var(--ifm-color-content);
}

html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet),
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table,
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table tr,
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table tr:nth-child(2n),
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table td,
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet__active-cell--edit) {
  background: #23272F;
}

.heroSpreadsheet :global(.Spreadsheet) table th {
  background: var(--ifm-color-emphasis-100);
  color: var(--ifm-color-content);
}

html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table th {
  background: #191B22;
}

html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table,
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table th,
html[data-theme="dark"] .heroSpreadsheet :global(.Spreadsheet) table td {
  border-color: rgba(255, 255, 255, 0.1);
}

.heroSpreadsheet :global(.Spreadsheet) table td {
  color: inherit;
}

.heroSpreadsheet :global(.Spreadsheet) input {
  color: inherit;
}

.heroSpreadsheet table {
  margin-bottom: 0;
  width: auto;
}

.heroSpreadsheet table th,
.heroSpreadsheet table td {
  padding: 4px;
}

/* Feature Sections */
.featureSection {
  padding: 4rem 0;
  width: 100%;
}

.featureSection.light {
  background: var(--ifm-background-color);
}

.featureSection.dark {
  background: var(--ifm-color-emphasis-100);
}

[data-theme="light"] .featureSection.dark {
  background: rgba(0, 0, 0, 0.02);
}

html[data-theme="dark"] .featureSection.light {
  background: #23272F;
}

html[data-theme="dark"] .featureSection.dark {
  background: #191B22;
}

.featureHeader {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.featureHeader h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.featureHeader p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ifm-color-emphasis-800);
}

.featureContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.featureCode {
  width: 100%;
}

.featureDemo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.tabbedCodeBlock {
  width: 100%;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 8px;
  overflow: hidden;
}

html[data-theme="dark"] .tabbedCodeBlock {
  border-color: rgba(255, 255, 255, 0.1);
}

.tabbedCodeBlock :global(.theme-code-block) {
  border-radius: 0;
  margin-top: 0;
  border: none;
}

.codeTabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
  margin-bottom: 0;
  padding: 0 0.5rem;
  background: var(--ifm-code-background);
  border-radius: 0;
}

html[data-theme="dark"] .codeTabs {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.codeTab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: var(--ifm-font-family-monospace);
  color: var(--ifm-color-emphasis-600);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}

.codeTab:hover {
  color: var(--ifm-font-color-base);
}

.codeTabActive {
  color: var(--ifm-font-color-base);
  border-bottom-color: var(--ifm-color-primary);
}

html[data-theme="dark"] .codeTabActive {
  border-bottom-color: var(--ifm-color-primary);
}

.demoContainer {
  width: 100%;
  max-width: 600px;
  max-height: 400px;
  border-radius: 8px;
  overflow: auto;
}


.ratingViewer {
  display: inline-block;
  font-size: 1.2rem;
  color: var(--ifm-color-warning);
}

.ratingEditor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
}

.ratingSlider {
  flex: 1;
  min-width: 100px;
}

.ratingValue {
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  color: var(--ifm-color-primary);
}

.demoContainer :global(.Spreadsheet) {
  margin: 0;
}

.demoContainer :global(.Spreadsheet),
.demoContainer :global(.Spreadsheet) table tr:nth-child(2n),
.demoContainer :global(.Spreadsheet__active-cell--edit) {
  background: var(--ifm-background-surface-color);
  color: var(--ifm-color-content);
}

html[data-theme="dark"] .demoContainer :global(.Spreadsheet),
html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table,
html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table tr,
html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table tr:nth-child(2n),
html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table td,
html[data-theme="dark"] .demoContainer :global(.Spreadsheet__active-cell--edit) {
  background: #23272F;
}

.demoContainer :global(.Spreadsheet) table th {
  background: var(--ifm-color-emphasis-100);
  color: var(--ifm-color-content);
}

html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table th {
  background: #191B22;
}

html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table,
html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table th,
html[data-theme="dark"] .demoContainer :global(.Spreadsheet) table td {
  border-color: rgba(255, 255, 255, 0.1);
}

.demoContainer :global(.Spreadsheet) table td {
  color: inherit;
}

.demoContainer :global(.Spreadsheet) input {
  color: inherit;
}

.demoContainer table {
  margin-bottom: 0;
  width: 100%;
}

.demoContainer table th,
.demoContainer table td {
  padding: 8px;
}

@media screen and (max-width: 996px) {
  .featureContent {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .featureHeader h2 {
    font-size: 2rem;
  }

  .featureSection {
    padding: 3rem 0;
  }
}
